<template>
  <div class="setbindsns">
    <div class="setbindsns-header">
      <p>账号信息</p>
      <p class="header-complete">
        完成 <span>{{ finish }}/4</span>
      </p>
    </div>
    <div class="setbindsns-container">
      <div class="setbindsns-item">
        <div class="item-img">
          <img src="/image/user/phone.png" alt="" />
        </div>
        <div class="item-center">
          <p class="item-phone">
            <span>手机</span>
            未绑定
          </p>
          <p>可用手机号加密登录在线网校，可通过手机号找回密码</p>
        </div>
        <div class="item-btn" @click="changePhone">修改绑定</div>
      </div>
      <div class="setbindsns-item">
        <div class="item-img">
          <img src="/image/user/pwd.png" alt="" />
        </div>
        <div class="item-center">
          <p class="item-phone"><span>密码</span></p>
          <p>用于保护账号信息和登录安全</p>
        </div>
        <div class="item-btn" >修改密码</div>
      </div>
      <div class="setbindsns-item">
        <div class="item-img">
          <img src="/image/user/mime.png" alt="" />
        </div>
        <div class="item-center">
          <p class="item-phone"><span>用户名</span></p>
          <p>可用用户名加密码登录在线网校</p>
        </div>
        <div class="item-btn" v-if="!userInfo.username">
          绑定用户
        </div>
      </div>
      <div class="setbindsns-item">
        <div class="item-img">
          <img src="/image/user/email.png" alt="" />
        </div>
        <div class="item-center">
          <p class="item-phone"><span>邮箱</span> 未绑定</p>
          <p>可用邮箱加密登录在线网校，可用邮箱找回密码</p>
        </div>
        <div class="item-btn">绑定邮箱</div>
      </div>
    </div>

    <!--    修改手机号-->
    <el-dialog
      title="修改手机号"
      :visible.sync="phoneOpen"
      width="500px"
      before-close="handlePhoneClose"
    >
      <div class="phoneDialog">
        <div class="tip">
          为保障您的账号安全和收费课程的正常学习，小鹿希望您能为帐号绑定手机号，更换手机号后请及时换绑。（1个手机号只能绑定1个小鹿线帐号）
        </div>
        <el-form
          ref="phoneForm"
          :model="phoneForm"
          label-width="80px"
          :rules="phoneRules"
        >
          <el-form-item label="手机号" prop="mobile">
            <el-col :span="24">
              <el-input
                v-model="phoneForm.mobile"
                placeholder="请输入手机号"
              ></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="验证码" prop="captcha">
            <el-row>
              <el-col :span="16">
                <el-input
                  v-model="phoneForm.captcha"
                  placeholder="请输入验证码"
                  @keyup.enter.native="onPhoneSubmit('phoneForm')"
                ></el-input>
              </el-col>
              <el-col :span="8">
                <el-button class="sendCode" @click="showVerify('phoneForm')">{{
                  captcha
                }}</el-button>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item>
            <el-row>
              <el-col :span="24">
                <el-button
                  type="primary"
                  @click="onPhoneSubmit('phoneForm')"
                  class="phoneSubmit"
                  >确认</el-button
                >
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <!--  修改密码对话框  -->
    <el-dialog
      title="修改密码"
      :visible.sync="pswOpen"
      width="400px"
      before-close="handlePswClose"
    >
      <div>
        <el-form
          ref="pswForm"
          :model="pswForm"
          label-width="80px"
          :rules="pswRules"
        >
          <el-form-item label="旧密码" prop="oldPwd">
            <el-input
              show-password
              v-model="pswForm.oldPwd"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="password">
            <el-input
              show-password
              v-model="pswForm.password"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="repassword">
            <el-input
              show-password
              v-model="pswForm.repassword"
              placeholder="请输入密码"
              @keyup.enter.native="onPswSubmit('pswForm')"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-row>
              <el-col :span="24">
                <el-button
                  type="primary"
                  @click="onPswSubmit('pswForm')"
                  class="changepass"
                  >确认</el-button
                >
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <!--  修改用户名  -->
    <el-dialog
      title="修改用户名"
      :visible.sync="usernameOpen"
      width="400px"
      before-close="handleUsernameClose"
    >
      <div class="username-dialog">
        <p></p>
        <el-form
          ref="userForm"
          :model="userForm"
          label-width="80px"
          :rules="userRules"
        >
          <el-form-item label="用户名" prop="username">
            <el-input
              v-model="userForm.username"
              placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              show-password
              v-model="userForm.password"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="repassword">
            <el-input
              show-password
              v-model="userForm.repassword"
              placeholder="请输入再次密码"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-row>
              <el-col :span="24">
                <el-button
                  type="primary"
                  @click="onUserSubmit('userForm')"
                  class="changepass"
                  >确认</el-button
                >
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <!--    行为验证-->
    <Verify
      ref="verify"
      :captcha-type="'blockPuzzle'"
      :img-size="{ width: '400px', height: '200px' }"
      @success="success"
      @error="error"
    />
  </div>
</template>

<script>
import { sendModifyMobileCaptcha } from "@/common/api/sms";
import Verify from "@/components/verifition/Verify";
import {
  modifyMobile,
  createToken,
  getInfo,
  logout,
  modifyPassword,
  modifyUsername,
} from "@/common/api/auth";
import { Encrypt } from "@/utils/aes.js";
import { mapState, mapActions, mapMutations } from "vuex";
import { Loading } from "element-ui";
export default {
  data() {
    return {
      crtType: "changePhone",
      phoneOpen: false, // 修改手机号对话框
      phoneForm: {}, // 修改手机号表单
      phoneRules: {
        mobile: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "目前只支持中国大陆的手机号码",
          },
        ],
        captcha: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur",
          },
        ],
      },
      sendTimer: null, // 修改手机号 发送
      captcha: "发送验证码",
      pswOpen: false, // 修改密码
      pswForm: {},
      pswRules: {
        oldPwd: [
          {
            required: true,
            message: "请输入旧密码",
            trigger: "blur",
          },
          {
            min: 6,
            max: 30,
            message: "长度在 6 到 30 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 30,
            message: "长度在 6 到 30 个字符",
            trigger: "blur",
          },
        ],
        repassword: [
          {
            required: true,
            message: "请输入确认密码",
            trigger: "blur",
          },
          {
            min: 6,
            max: 30,
            message: "长度在 6 到 30 个字符",
            trigger: "blur",
          },
        ],
      },
      usernameOpen: false, // 修改用户名
      userForm: {},
      userRules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
          {
            min: 6,
            max: 18,
            message: "长度在 6 到 18 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 30,
            message: "长度在 6 到 30 个字符",
            trigger: "blur",
          },
        ],
        repassword: [
          {
            required: true,
            message: "请输入确认密码",
            trigger: "blur",
          },
          {
            min: 6,
            max: 30,
            message: "长度在 6 到 30 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
    finish() {
      let num = 0;
      if (this.userInfo.mobile) {
        num += 1;
      }
      if (this.userInfo.username) {
        num += 1;
      }
      if (this.userInfo.password) {
        num += 1;
      }
      if (this.userInfo.email) {
        num += 1;
      }
      return num;
    },
  },
  components: {
    Verify,
  },
  methods: {
    ...mapActions(["saveUserInfoAction"]),
    
    //修改手机号绑定
    changePhone(){
        console.log('00000000000000000')
        this.phoneOpen = true
        this.phoneForm = {}
        this.crtType = 'changePhone'
    },
    // 修改手机号-显示行为校验
    showVerify(phoneForm){
        if(this.phoneForm){
            this.$refs.verify.show()
        }
    },
    success(e){
        console.log(e)
        this.phoneForm.captchaVerification = e.captchaVerification
        this.sencodes()
    },
    error(){
        console.log('行为校验失败！')
    },
    // 请求验证码
    sencodes(){
        let reg = /^1[3456789]\d{9}$/
        if(!reg.test(this.phoneForm.mobile)){
            this.$message({
                type:'error',
                message:'手机号输入错误，请重新输入！'
            })
        }else{
            if(this.phoneForm.mobile){
                let mobile = Encrypt(this.phoneForm.mobile)
                //发送请求
                this.sendCode(mobile)
                //修改按钮内的文字
                //利用定时器的方式修改
            }
        }
    },
    //发送请求
    sendCode(mobile){
        sendModifyMobileCaptcha({mobile}).then(res => {
            // console.log(res,'发送验证码')
            if(res.meta.code == '200'){
                this.$message({
                    type:'success',
                    message:'验证码发送成功！'
                })
            }
        })
    },
    //修改手机号的确认事件
    onPhoneSubmit(phoneForm){
        this.$refs[phoneForm].validate(valid => {
            if(valid){
                if(this.phoneForm.mobile){
                    var phoneloading = Loading.service({
                        lock:true,
                        text:'Loading...',
                        spinner:'el-icon-loading',
                        background:'rgba(0,0,0,.7)'
                    })
                    let userId = this.userInfo.id
                    let mobile = Encrypt(this.phoneForm.mobile)
                    let captcha = this.phoneForm.captcha
                    let captchaVerification = this.phoneForm.captchaVerification
                    createToken().then(res => {
                        let tokens = res.data.token
                        modifyMobile({
                            token : tokens,
                            userId : userId,
                            mobile : mobile,
                            captcha : captcha,
                            captchaVerification : captchaVerification,
                        }).then(res => {
                            console.log(res,'修改手机号是否成功')
                            if(res.meta.code == '200'){
                                this.$message({
                                    type:'success',
                                    message:'修改成功，请重新登录！'
                                })
                                // 关闭loading
                                phoneloading.close()
                                // 退出登录
                                this.goLogout()
                                // 关闭对话框
                                this.phoneOpen = false
                            }
                        })
                    })
                }
            }
        })
    },
    //退出登录
    goLogout(){
        logout().then(res => {
            this.$message({
                type:'success',
                message:'退出成功！'
            })
            localStorage.removeItem('token')
            localStorage.removeItem('isLogin')
            window.location.href= '/'
        })
    }
  },
};
</script>

<style scoped>
.changepass {
  margin-left: 200px;
}

.phoneSubmit {
  margin-left: 300px;
}

.sendCode {
  width: 100%;
  border: none;
}

.phoneDialog .tip {
  width: 400px;
  margin: 0 auto 20px;
}

.setbindsns {
  width: 1000px;
  height: 700px;
  padding-top: 20px;
}

.setbindsns-header {
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #333333;
  display: flex;
}

.header-complete {
  margin-left: 40px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(161, 153, 159, 1);
}

.header-complete span {
  color: #ff1626;
}

.setbindsns-container {
  width: 100%;
  height: 700px;
}

.setbindsns-item {
  display: flex;
  align-items: center;
  /* justify-content: space-around; */
  height: 90px;
  width: 100%;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  border-top: 1px solid rgba(112, 112, 112, 0.3);
}

.item-img {
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item-img img {
  width: 28px;
  height: 40px;
}

.item-phone {
  color: #ff1626;
  margin-bottom: 5px;
}

.item-phone span {
  font-weight: 700;
  font-size: 18px;
  color: #333333;
  margin-right: 5px;
}

.item-center {
  width: 800px;
}

.item-btn {
  padding: 5px 20px;
  border: 1px solid rgba(112, 112, 112, 1);
  border-radius: 15px;
  cursor: pointer;
}
</style>
